<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>响应式基础</title>
        <!--第一步：安装Vue.js-->
        <script src="./vue.js"></script>
    </head>
    <body>
      <!--第3步：创建HTML模板（根组件）-->
      <div id="app">
        <button @click="count++">Count is:{{count}}</button>
        <br> ={{msg}}=
      
      <div>
        <button @click="showInput">显示输入框</button>
        场景：在输入框条件渲染之后获取焦点
        用户名：<input id="inputTiTle"  ref="inputTiTle" v-if="show" v-model="userNmae"/>
      </div>
      
      <div>
        深层响应性:<br>
           someObj:{{someObj}}<br>  
           obj:{{obj}}<br>
           obj1:{{obj1}}
      </div>

      </div>
    </body>
    <script>
        //第二步：创建Vue的应用实例
        const app = Vue.createApp({
           data(){//定义所需的状态变量
              return{
                  count: 0,//等价于:const count = rref(0)
                  someObj: {name:'zhangsan'},//响应式代理vs.原始值
                  show: true, //默认不渲染
                  obj: ['a', 'b'],
                  obj1:{
                    obj: ['a', 'b'],
                    someObj:{name: 'zhangsan'}
                  }
                }
              },
              methods:{
                showInput(){
                    this.show = true;
                    console.log('inputTitle = ', document.getElementById("inputTitle")); //获取不到input对象，因为Vue还没有渲染
                    //传统获取焦点方法：
                   // document.getElementById("inputTitle").focus();
                    Vue.nextTick(function(){
                        console.log('inputTitle = ', document.getElementById("inputTitle"));
                        //this.$refs.inputTitle.focus();
                    });
                    //测试深层响应性
                    this.someObj.name = '王五';
                    this.obj.push('c');
                    this.obj1.obj.push("d");
                    this.obj1.someObj.name = '张三';
                }

              },
              //生命周期钩子函数
           mounted(){
              console.log('count is =',this.count);
              //msg没有再data函数返回的对象中声明定义，故它不是一个响应式状态。
              this.msg = 'hello Vue.js';
              //响应式代理vs.原始值
              const newObj = {name:'lisi'};
              this.someObj = newObj;//将newObj赋值给someObj
              console.log(newObj === this.someObj);
              console.log('newObj = ',newObj);
              console.log('someObj = ',this.someObj);
             }
        });
      //第四步：在根元素上挂载应用实例，返回根组件实例对象
      const vm = app.mount("#app");//const app = Vue.createApp({}).mount("#app");
    </script>
</html>